<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<sp-split-section
    title="Sites & Areas"
    subtitle="Manage your organization's sites and production areas"
>
    <div fxLayout="row">
        <button
            mat-raised-button
            color="accent"
            data-cy="sites-manage-sites-button"
            (click)="openManageSitesDialog(undefined)"
        >
            <mat-icon>add</mat-icon>
            <span>New site</span>
        </button>
    </div>
    <sp-table
        class="mt-10"
        [dataSource]="dataSource"
        [columns]="displayedColumns"
        matSort
        data-cy="all-sites-table"
    >
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef><b>Site</b></th>
            <td mat-cell *matCellDef="let site" data-cy="site-table-row-label">
                {{ site.label }}
            </td>
        </ng-container>
        <ng-container matColumnDef="areas">
            <th mat-header-cell *matHeaderCellDef><b>Areas</b></th>
            <td mat-cell *matCellDef="let site" data-cy="site-table-row-areas">
                {{ site.areas.toString() }}
            </td>
        </ng-container>
        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef></th>
            <td mat-cell *matCellDef="let site">
                <div fxLayout="row" fxLayoutAlign="end center">
                    <button
                        mat-icon-button
                        color="accent"
                        data-cy="sites-edit-button"
                        (click)="openManageSitesDialog(site)"
                    >
                        <mat-icon>edit</mat-icon>
                    </button>
                    <button
                        [attr.data-cy]="
                            'sites-delete-button-' +
                            site.label.replaceAll(' ', '_')
                        "
                        (click)="deleteSite(site)"
                        mat-icon-button
                        color="accent"
                    >
                        <mat-icon>delete</mat-icon>
                    </button>
                </div>
            </td>
        </ng-container>
    </sp-table>
</sp-split-section>
